<template>
<div>
  <div class="perInput">
    <el-input placeholder="请输入角色英文名" v-model="role.name" size="small">
      <template slot="prepend">ROLE_</template>
    </el-input>
    <el-input size="small" v-model="role.nameZh" placeholder="请输入角色中文名" @keydown.enter.native="addPer"></el-input>
    <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" style="height: 32px" @click="addPer">添加</el-button>
  </div>
  <el-collapse v-model="activeName" accordion @change="change" style="width: 70%">
    <el-collapse-item :title="item.nameZh"  v-for="(item ,index) in roles" :key="index" :name="item.id" >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>权限</span>
          <el-button @click="deletePer(item.id)"  style="float: right; padding: 3px 0" type="text" icon="el-icon-delete" size="medium"></el-button>
        </div>
      <el-tree
          :data="rolesData"
          show-checkbox
          node-key="id"
          ref="tree"
          :key="index"
          :default-checked-keys="seletMenus"
          :props="defaultProps">
      </el-tree>
      <div class="collapse">
        <el-button size="mini" type="primary" @click="clearUpdataRole(index+1)" >取消修改</el-button>
        <el-button size="mini" type="primary"  @click="updataRoles(item.id,index)">确认修改</el-button>
      </div>
      </el-card>
    </el-collapse-item>

  </el-collapse>
</div>
</template>

<script>
import axios from "axios";

export default {
  name: "PermissMana",
  data(){
    return {
      role:{
        name:'',
        nameZh:''
      },
      roles:[],
      rolesData:[],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      seletMenus:[],
      activeName:'1'
    }
  },
  methods:{
    addPer(){
      if(this.role.name&&this.role.nameZh){
        axios({
          method:'post',
          url:'/api/system/basic/permission/',
          data: this.role
        }).then(res=>{
          if(res){
            this.initPer();
            this.role.nameZh='';
            this.role.name =''
          }

        })
      }else{
        this.$message.error('输入是空的');
      }
    },
    deletePer(rid){
      this.$confirm('此操作将永久删除该ROLE, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          method:'delete',
          url:`/api/system/basic/permission/role/${rid}`
        }).then(res=>{
          if(res){
            this.initPer()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    updataRoles(rid,index){
      let tree = this.$refs.tree[index];
      let selectTree = tree.getCheckedKeys(true)
      let url = '/api/system/basic/permission/?rid='+rid;
      console.log(rid)
      console.log(selectTree)
      selectTree.forEach(id=>{
        url+=  '&mids='+id;
      })
      console.log(url)
      axios({
        method:'put',
        url: url
      }).then(res=>{
         if(res){
           this.seletRoles()
         }
      })

    },
    clearUpdataRole(rid){
    this.seletRoles(rid)
    },
    change(rid){
      this.initRoles(),
          this.seletRoles(rid)
    },
    seletRoles(rid){
      axios({
        method:'get',
        url:`/api/system/basic/permission/mid/${rid}`
      }).then(res=>{
        this.seletMenus = res.data
      })
    },
    initRoles(){
      axios({
        method:'get',
        url:'/api/system/basic/permission/menus'
      }).then(res=>{
        if(res){
          this.rolesData = res.data
        }
      })
    },
    initPer(){
      axios({
        method:'get',
        url:'/api/system/basic/permission/'
      }).then(res=>{
        if(res){
          this.roles = res.data
        }
      })
    }
  },
  mounted() {
    this.initPer()
  }
}
</script>

<style scoped>
.perInput{
  width: 60%;
  display: flex;
  justify-content: flex-start;
}
.perInput .el-input{
  margin-right: 5px;
  margin-bottom: 15px;
}
.collapse{
  display: flex;
  justify-content: flex-end;
}
</style>